<template>
    <div class="picture">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
<!--&lt;!&ndash;                    <el-carousel :interval="1500"  arrow="always" class="rotation" >&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-carousel-item v-for="item in 4" :key="item">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-image :src="src" ref="image" contain></el-image>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-carousel-item>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-carousel>&ndash;&gt;-->
                    <swiper :options="swiperOption" style="width: 90%; height: 100%">
                        <swiper-slide class="swiper-slide" v-for="(item,index) in srcs" :key="index">
                            <img :src="item" style="width: 100%;height: 100%"/>
                        </swiper-slide>
                        <!-- 分页器 -->
                        <div class="swiper-pagination"  slot="pagination"></div>
                        <!-- 左右箭头 -->
                        <div class="swiper-button-prev" slot="button-prev"></div>
                        <div class="swiper-button-next" slot="button-next"></div>
                    </swiper>
                </div>
            </div>
        </div>




        <div type="flex" class="row-bg" justify="center">

<!--        <el-row  type="flex" justify="center" class="video-title">-->
<!--            <el-col :span="24">-->
<!--                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">-->
<!--                    <el-menu-item v-for="(category,index) in categoryList" :key="index" :index="index+''" @click="queryPictureByCategory(category.id)">{{category.name}}</el-menu-item>-->
<!--                    <el-button type="primary" style="margin-top: 11px" @click="empty">全部</el-button>-->
<!--                </el-menu>-->
<!--            </el-col>-->
<!--        </el-row>-->


        <div class="row" :span="24">
            <div  class=" col-lg-2 col-md-4 col-sm-6 col-xs-8" >
                <el-row  type="flex" justify="center" class="video-title" :class="fixed == true ? 'fixedBtn' :''">
                    <el-col >
                        <el-card shadow="hover" style="width: auto;font-size: large;text-align: center;color: #ff6d6d">【分类】</el-card>
                        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                            <el-card shadow="hover">
                                <el-menu-item style="font-size: large;width: auto;text-align: center;" v-for="(category,index) in categoryList" :key="index" :index="index+''" @click="queryPictureByCategory(category.id)">{{category.name}}</el-menu-item>
                            </el-card>
                        </el-menu>
                    </el-col>
                </el-row>
            </div>

            <div  class="col-lg-3 col-md-6 col-sm-8 col-xs-12"  v-for="item in pictureList" :key="item.id">
                <div class="shadow">
                    <el-button type="text" @click="open(item.id)"><el-image :src="item.image"  class="picture-img"></el-image></el-button>
                    <span class="demonstration" v-text="item.description"></span>
                    <hr style="border:none; background-color:#dddddd; height: 1px; margin-top: 10px;margin-bottom: 10px">
                    <el-button type="primary" round size="small" class="picture-category">{{item.category.name}}</el-button>
                    {{item.updateTime|moment}}<i class="el-icon-caret-right" ></i>
                </div>
            </div>
        </div>
        </div>

    </div>
</template>

<script>
    import sectionTitle from '@/components/section-title'
    import Banner from '@/components/banner'
    import Quote from "@/components/quote"
    import { queryPictureList,categoryList } from '../api'
    export default {
        name: "Picture",
        data(){
          return{
              activeIndex: '0',
              current: 1,
              size: 50,
              height: '',
              srcs: [require('../assets/wallhaven-lq5k3r.jpg'),require('../assets/04.jpg'),require('../assets/02.jpg'),require('../assets/03.jpg')],
              pictureList: [],
              categoryList:[],
              swiperOption:{
                  //显示分页
                  pagination: {
                      el: '.swiper-pagination'
                  },
                  //设置点击箭头
                  navigation: {
                      nextEl: '.swiper-button-next',
                      prevEl: '.swiper-button-prev'
                  },
                  //自动轮播
                  autoplay: {
                      delay: 1500,
                      //当用户滑动图片后继续自动轮播
                      disableOnInteraction: false,
                  },
                  //开启循环模式
                  loop: false,

              },
              fixed: false,
          }
        },
        components:{
            Quote,
            sectionTitle,
            Banner,
        },
        methods: {
            open(id) {
                // this.$router.push("/picture/"+id)
                let routeData = this.$router.resolve({ path: '/picture/'+id });
                window.open(routeData.href, '_blank');
            },
            queryPictureList(id,current,size){
                queryPictureList(id,current,size).then(res=>{
                    this.pictureList = res.data.records
                }).catch(err=>{
                    console.log(err)
                })
            },
            CategoryList(){
                categoryList().then(res=>{
                    this.categoryList = res.data
                }).catch(err=>{
                    console.log(err)
                })
            },
            queryPictureByCategory(id){
                this.queryPictureList(id,this.current,this.size)
            },
            empty(){
                this.queryPictureList(null,this.current,this.size)
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            fixedActiveBtn() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                scrollTop >=1212 ? this.fixed = true : this.fixed = false
            },
        },
        mounted() {
            this.$nextTick(()=>{
                this.queryPictureList(null,this.current,this.size)
            })
            this.CategoryList()
            window.addEventListener('scroll', this.fixedActiveBtn);
        },
        beforeMount:function(){

        },
    }
</script>


<style  lang="less">
    .fixedBtn {
        position: fixed;   //固定定位
        top: -80px;
        left: 0;
        z-index: 200;
    }

    .picture{
        padding-top: 100px;
        margin: 0  50px 0;

    }

    .picture-img{
        border-radius: 8px;
        margin-bottom: 10px;
        width: 100%;
        /*&:hover {*/
        /*     z-index: 9999;*/
        /*     transform: scale(2, 2);*/
        /*     filter: contrast(100%);*/
        /* }*/
    }
    .picture-category{
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }
    /*轮播图*/
    .rotation{
        margin-bottom: 10px;
        width: 100%;
    }
    .shadow{
        float:left;
        transition-duration: 0.5s;
        border-radius: 10px;
        padding: 10px;
        -webkit-box-shadow: #ccc 0px 10px 10px;
        -moz-box-shadow: #ccc 0px 10px 10px;
        box-shadow: #ccc 10px 10px 10px 5px;
    }
    /*.shadow:hover{*/
    /*    -webkit-box-shadow: #ccc 0px 10px 10px;*/
    /*    -moz-box-shadow: #ccc 0px 10px 10px;*/
    /*    box-shadow: #ccc 10px 10px 10px 5px;  */
    /*}*/


    .demonstration{
        text-align-last:justify;
        text-align:justify;
        text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器
        width: 150px;
    }

</style>
